課程目的:

這次的內容為製作一個打地鼠遊戲
作品實做

本次功能實作重點：

• 抓取DOM以及初始設定
• 開始遊戲
• 地鼠跳出時點擊加分
• 地鼠隨機跳出邏輯

抓取DOM以及初始設定

     const scoreBoard = document.querySelector(".score");
      const moles = [...document.querySelectorAll(".mole")]; //nodeList轉換成陣列
      
      const status = moles.reduce((prev, cur, index) => {
        prev[index] = false;
        return prev;
      }, {}); //設定每個地鼠的狀態預設為false
      let timeUp = true; //設定遊戲時間到的初始設定為true
      let score = 0; //設定初始分數

開始遊戲

    const startScore = (s) => {
        score = s;
        scoreBoard.textContent = score; //設定分數欄分數
      };
      
    const startGame = () => {
        console.log("遊戲開始!");
        startScore(0);//設定初始分數為0
        randomMoles();//執行地鼠隨機跳出
        timeUp = false;
        setTimeout(() => {
          (timeUp = true), alert("時間到！");
        }, 10000); //遊戲時間十秒
      };

地鼠跳出時點擊加分

 const clickHandler = function () {
        if (molesProxy[moles.indexOf(this)]) {
          startScore(score + 1);
          console.log(`你點擊的分數:${score}`);
          molesProxy[moles.indexOf(this)] = false; //點擊後關閉
        }
      };

      //資料控制地鼠點擊分數
      const molesProxy = new Proxy(status, {
        get(target, key) {
          return target[key]; 
        },
        set(target, key, value) {
          target[key] = value; 
          moles[key].removeEventListener("click", clickHandler);
          
         //如果地鼠狀態為true
          if (value) {
            moles[key].addEventListener("click", clickHandler); //監聽是否點擊
            moles[key].classList.add("up"); //地鼠跳出
          } else {
            moles[key].classList.remove("up"); //地鼠埋入
          }
        },
      });

地鼠隨機跳出邏輯

 const randomMoles = function () {
        const mole = Math.floor(Math.random() * moles.length); //取得地鼠的隨機號碼
        const time = Math.random() * 500 + 500; //設定時間在500~1000
        if (molesProxy[mole]) return randomMoles(); 
        //檢查地鼠是否是出現的狀態，如果是則randomMoles()
        
        molesProxy[mole] = true;
        
        //等待time / 2，如果遊戲時間還沒到，再隨機出現一隻地鼠
        setTimeout(() => {
          if (!timeUp) randomMoles();
        }, time / 2);

        //如果經過time時間沒有點擊到地鼠，地鼠會自動返回土裡
        setTimeout(() => {
          molesProxy[mole] = false;
        }, time);
      };

導讀文件以及學習資源

[ Alex 宅幹嘛 ] 👨‍💻 深入淺出 Javascript30 快速導覽 | Day 30：Whack A Mole
JS30